<#include "/common/layout.html">
<@header>
  	<link rel="stylesheet" href="${ctx}/plugins/bootstrap-table/bootstrap-table.min.css">
</@header>
<@body>
<div class="right_col" role="main">
    <div class="row">
      	<div class="col-md-12 col-sm-12 col-xs-12">
	        <div class="x_panel">
	        	<form class="form-inline">
		        	<div class="row x_title">
		        		<div class="col-md-4">
		        			<#if shiro.hasPermission("deleteLog")>
					 			<a class="btn btn-danger" delete-batch-url="${ctx}/system/log/deleteBatch" ><i class="fa fa-remove"></i> 批量删除</a>
							</#if>
		        		</div>
	                 	<div class="col-md-8">
						 	<div class="input-group pull-right">
				               <input type="text" id="search" name="search" class="form-control" placeholder="请输入用户">
				               <div class="input-group-btn">
				                 <button class="btn btn-default" id="btn_query" type="button"><i class="fa fa-search"></i></button>
				                 <a href="javascript:refreshTable();" class="btn btn-default"><i class="fa fa-refresh"></i></a>
				               </div>
			            	</div>
			            	<div class="form-group pull-right">
						    	<input autocomplete="off" type="text" id="daterange" name="daterange" class="form-control item-datetime-range" id="daterange" placeholder="请选择开始日期  ~ 请选择结束日期" style="width: 300px; margin: 0 5px;">
						  	</div>
	                 	</div>
		       		</div>
	       		</form>
	          	<div class="x_content">
	          		<table id="table" class="table table-striped table-bordered table-hover"></table>
	       		</div>
	       	</div>
		</div>
	</div>
</div>
</@body>
<@footer>
<script src="${ctx}/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx}/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
	$("#table").bootstrapTable({
		url: '${ctx}/system/log/listLog', //请求后台的URL（*）
		contentType: "application/x-www-form-urlencoded",//用post请求，这个是必须条件，必须加上，get可以不用，亲测
		dataType: "json",
		method: "POST",//请求方式（*）
		//toolbar: '#toolbar', //工具按钮用哪个容器
		undefinedText: "-", /*为undefiend时显示的字*/
		striped: false, //是否显示行间隔色
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pagination: true, //是否显示分页（*）
		sortable: false, //是否启用排序
		sortOrder: "asc", //排序方式
		sortName: "", //排序方式
		toolbar: '', // 指定工作栏
		loadingFontSize: 13, // 自定义加载文本的字体大小
		//search: true, //是否使用客户端搜索
		queryParams: queryInitParams,//传递参数（*）
		responseHandler: responseHandler,
		queryParamsType: "limit",
		sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
		pageNumber: 1, //初始化加载第一页，默认第一页
		pageSize: 10, //每页的记录行数（*）
		pageList: [10, 20, 50, 999], //可供选择的每页的行数（*）
		showColumns: false, //是否显示所有的列
		showRefresh: false, //是否显示刷新按钮
		minimumCountColumns: 2, //最少允许的列数
		clickToSelect: true, //是否启用点击选中行
		strictSearch: true,
		//height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		showToggle: false, //是否显示详细视图和列表视图的切换按钮
		uniqueId: "id", //每一行的唯一标识，一般为主键列
		cardView: false, //是否显示详细视图
		detailView: false, //是否显示父子表
		showExport: false, //是否显示导出
		exportDataType: 'basic', //'basic', 'all', 'selected'.
		escape: true,//html转意
		// align: "center",
		columns: [
			{checkbox: true },
	        {
	            field: 'title',
	            title: '日志操作',
	            align : "center"
	        }, {
	            field: 'userName',
	            title: '用户名称',
	            align : "center"
	        },
	        {
	            field: 'url',
	            title: 'URL地址',
	            align : "center"
	        },
	        {
	            field: 'createTime',
	            title: '创建时间',
	            align : "center"
	        },
	        {
	            field : 'operation',
	            title : '操作',
	            align : "center",
	            formatter : function(value, row, index) {
	                return '<a class="btn btn-info btn-xs dialog_detail" data-title="日志详情" data-url="${ctx}/system/log/params/'+ row.id +'" data-width="800" data-height="600">查看详情</a> ';
	            }
	        }
		],//表格列
		onLoadSuccess: tableLoadSuccess, //成功渲染回调
	});
	/* 表格查询参数 */
	function queryInitParams(params) {
		var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
			limit: params.limit, //页面大小
			offset: params.offset ,//页码
			search: $("#search").val(),
			daterange : $("#daterange").val(),
		};
		return temp;
	}
	/* 表格加载成功事件 */
	function tableLoadSuccess(data) {
		$(".bs-checkbox").css('vertical-align','middle');
	}
	function responseHandler(data) {
		return data;
	}
	/*搜索*/
	$("#btn_query").click(function() {
		var params = $("#table").bootstrapTable('getOptions');
		$("#table").bootstrapTable('refresh', params);
	});
	/*批量删除*/
	$("body").delegate("*[delete-batch-url]", "click", function() {
		var deleteBatchUrl = $(this).attr('delete-batch-url');
		var checkedRows = $("#table").bootstrapTable('getSelections');
		var ids = [];
		$.each(checkedRows, function (i, item) {
			ids.push(item.id);
           })
		if(ids.length==0){
			$.alert({
			    title: '提示',
			    backgroundDismiss:true,
			    content: "请选择要删除的记录!",
			    buttons:{"好的":{ btnClass: 'btn-blue'}}
			});
		}else{
			$.confirm({
				type: 'red',
				closeIcon: true,
			    title: '警告',
			    content: "确认删除选中的【"+ids.length+"】条记录?",
			    buttons: {
			        '确认': {
			            btnClass: 'btn-blue',
			            action: function(){
			            	$.post(deleteBatchUrl,{id:ids},function(data){
								if(data.code==200){
									refreshTable();
									layer.msg(data.msg, { icon : 1 });
								}else{
									$.alert({
									    title: '提示',
									    content: data.msg,
									    buttons:{"好的":{ btnClass: 'btn-blue'}}
									});
								}
							});
			            }
			        },
			        '取消':{}
			    }
			});
		}
	});

	function refreshTable() {
		var params = $("#table").bootstrapTable('getOptions');
		$("#table").bootstrapTable('refresh', params);
	}
</script>
</@footer>
